<template>
  <div
    class="pieChart"
    :id="id"
    :title="title"
    :style="{
      width,
      height
    }"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["id", "pie_data", "title", "value", "height", "width", "color"],
  data() {
    return {};
  },
  methods: {
    draw_pie() {
      let charts = echarts.init(document.getElementById(this.id));
      charts.setOption({
        title: {
          text: ["{b|" + this.value + "%}"].join("\n\n\n"),
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              b: {
                fontFamily: "SourceHanSansCN-Medium",
                fontWeight: "500",
                color: "rgba(229, 244, 255, 1)",
                fontSize: 16
              }
            }
          }
        },

        grid: {
          right: 0,
          left: 0,
          bottom: "-10%",
          top: "-10%"
        },
        series: [
          {
            name: "总体参与率",
            type: "pie",
            clockWise: false, //false逆时针
            radius: [33, 38],
            startAngle: 90,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.$props.color
                  },
                  {
                    offset: 1,
                    color: "#00D5FF"
                  }
                ])
              }
            },
            hoverAnimation: false, //hover动画效果
            data: [
              {
                value: this.value,
                name: "01"
              },
              {
                value: 100 - this.value,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "none" //未完成的圆环的颜色
                  }
                }
              }
            ]
          },
          //外部实线框
          {
            name: "外框",
            type: "pie",
            animation: false,
            clockWise: false,
            radius: [40, 43],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: this.$props.color
              }
            },
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            data: [
              {
                value: 100,
                name: "02"
              },
              {
                value: 0,
                name: "invisible"
              }
            ]
          },
          // 外圈刻度
          {
            type: "gauge",
            radius: 46,
            startAngle: 90, //刻度起始
            endAngle: -269.9, //刻度结束
            splitNumber: 4, //刻度的分割段数
            z: 4,
            axisTick: {
              show: false
            },
            splitLine: {
              length: 6,
              lineStyle: {
                width: 4,
                color: "#3C61B2"
              }
            },
            pointer: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            }
          }
        ]
      });
      window.addEventListener("resize", function () {
        charts.resize();
      });
    }
  },

  watch: {
    value() {
      this.$nextTick(() => {
        this.draw_pie();
      });
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.draw_pie();
    });
  }
};
</script>

<style scoped></style>
